<template>
  <div class="Advanced-search">
      <ul>
        <li>
          <span>发件人</span>
          <el-icon><CaretBottom /></el-icon>
        </li>
        <li>
          <span>发件人</span>
          <el-icon><CaretBottom /></el-icon>
        </li>
        <li>
          <span>发件人</span>
          <el-icon><CaretBottom /></el-icon>
        </li>
        <li>
          <span>发件人</span>
          <el-icon><CaretBottom /></el-icon>
        </li>
        <div class="select-card slide-down">

</div>
      </ul>
  </div>
  <div class="header-select">
    <div class="left-content">
      <el-checkbox v-model="checked2"></el-checkbox>
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link addRight1">
          <el-icon><CaretBottom /></el-icon
          >
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="all">全部</el-dropdown-item>
            <el-dropdown-item command="no"> 无 </el-dropdown-item>
            <el-dropdown-item command="read">已读</el-dropdown-item>
            <el-dropdown-item command="unread">未读</el-dropdown-item>
            <el-dropdown-item command="hasStar">已加星标</el-dropdown-item>
            <el-dropdown-item command="noStars">未加星标</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="刷新"
        placement="bottom"
        show-after="500"
        v-if="!hasSelectedItem"
      >
        <el-icon class="addRight1"><RefreshLeft /></el-icon>
      </el-tooltip>
      <el-popover
        class="box-item"
        placement="bottom"
        trigger="click"
        :width="240"
      >
        <template #reference>
          <el-icon style="transform: rotate(90deg)" class="addRight1"
            ><MoreFilled /></el-icon
        ></template>
        <ul class="tip1-content">
          <li class="first1">
            <i class="iconfont icon-yiduxinxi"></i>
            <span>将所有绘画标记为已读</span>
          </li>
          <li class="second2">
            <span>选择邮件即可查看更多操作</span>
          </li>
        </ul>
      </el-popover>
      <!-- 只要有选中的条数则出现以下标签 -->
      <div class="select-icon" v-if="hasSelectedItem">
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="item.title"
        placement="bottom"
        show-after="500"
        v-for="(item,index) in titleIcon" :key="index"
      >
        <i class="iconfont addRight1" :class="item.name"></i>
      </el-tooltip>
      </div>
    </div>
    <el-pagination layout="prev, pager, next" :total="1000" />
  </div>
  <el-table
    :data="tableData"
    class="mail-table"
    style="width: 100%"
    :show-header="false"
  >
    <el-table-column>
      <template #default="{ row }">
        <!-- 筛选中符合条件的背景色则为background-color:#c2dbff -->
        <div
          class="mail-item"
          :style="row.select ? 'background-color:#c2dbff' : ''"
        >
          <!-- <div class="mail-header"> -->
          <div class="sender-info">
            <el-checkbox v-model="row.select" class="addRight"></el-checkbox>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="未加星标"
              placement="bottom"
              show-after="500"
              v-if="row.star == 0"
            >
              <i class="iconfont icon-zhongyao1 addRight"></i>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="已加星标"
              placement="bottom"
              show-after="500"
              v-else
            >
              <i class="iconfont icon-low addRight addColor"></i>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="点击此处可以告知 Gmail此会话非常重要。"
              placement="bottom"
              show-after="500"
              v-if="row.important"
            >
              <i class="iconfont icon-zhongyao addRight"></i>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              placement="bottom"
              show-after="500"
              v-else
            >
            <template #content>
              这是一封重要邮件，因为您已将其标记为重要。<br>点击此处可告知Gmail会话不重要
  </template>
              <i class="iconfont icon-a-bookmarkshuqian addRight"></i>
            </el-tooltip>
            <span class="sender-name">{{ row.name }}</span>
            <div class="sender-text">
              <p class="title">{{ row.title }}</p>
              <p class="desc">{{ row.desc }}</p>
            </div>
            <div class="time">{{ row.date }}</div>
            <div class="icon-content">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="归档"
              placement="bottom"
              show-after="500"
            >
              <i class="iconfont icon-wenjianguidang" @click="handlegd(row)"></i>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="bottom"
              show-after="500"
            >
              <i class="iconfont icon-shanchu"></i>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="标记为未读"
              placement="bottom"
              show-after="500"
              v-if="!row.read"
            >
              <i class="iconfont icon-weidu"></i>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="标记为已读"
              placement="bottom"
              show-after="500"
              v-else
            >
              <i class="iconfont icon-yiduxinxi"></i>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="延后"
              placement="bottom"
              show-after="500"
            >
              <i class="iconfont icon-huishouyanhoushijian"></i>
            </el-tooltip>
          </div>
          </div>

          

          <!-- </div> -->
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  watch,
  shallowRef,
  onBeforeUnmount,
  computed,
} from "vue";
import {
  CaretBottom,
  RefreshLeft,
  MoreFilled,
  StarFilled,
  Star,
} from "@element-plus/icons-vue";
const checked2 = ref(false);
const titleIcon=ref([
  {
    title:"归档",
    name:"icon-wenjianguidang"
  },
  {
    title:"列为垃圾邮件",
    name:"icon-jinggao"
  },
  {
    title:"删除",
    name:"icon-shanchu"
  },
  {
    title:"标记为未读",
    name:"icon-weidu"
  },
  {
    title:"移至",
    name:"icon-wenjianzhuanyi-"
  },
])
const tableData = ref([
  {
    date: "05-03",
    name: "用户名1",
    title: "标题111",
    desc: "NEW YORK, July 9, 2025 /PRNewswire/ — Omnicom (NYSE: OMC) will publish its second quarter 2025 results on Tuesday, July 15, 2025 after the New York Stock Exchange close of trading. The company will",
    address: "No. 189, Grove St, Los Angeles",
    select: false,
    read: 0,
    star: 1,
    important:1,

  },
  {
    date: "05-02",
    name: "用户名2",
    title: "标题111",
    desc: "NEW YORK, July 9, 2025 /PRNewswire/ — Omnicom (NYSE: OMC) will publish its second quarter 2025 results on Tuesday, July 15, 2025 after the New York Stock Exchange close of trading. The company will The company willNEW YORK, July 9, 2025 /PRNewswire/ — Omnicom (NYSE: OMC) will publish its second quarter 2025 results on Tuesday, July 15, 2025 after the New York Stock Exchange close of trading. The company will The company will",
    address: "No. 189, Grove St, Los Angeles",
    select: false,
    read: 1,
    star: 1,
    important:0,
  },
  {
    date: "05-04",
    name: "用户名3",
    title: "标题111",
    desc: "NEW YORK, July 9, 2025 /PRNewswire/ — Omnicom (NYSE: OMC) will publish its second quarter 2025 results on Tuesday, July 15, 2025 after the New York Stock Exchange close of trading. The company will",
    address: "No. 189, Grove St, Los Angeles",
    select: false,
    read: 0,
    star: 0,
    important:0,
  },
  {
    date: "05-01",
    name: "用户名4",
    title: "标题111",
    desc: "NEW YORK, July 9, 2025 /PRNewswire/ — Omnicom (NYSE: OMC) will publish its second quarter 2025 results on Tuesday, July 15, 2025 after the New York Stock Exchange close of trading. The company will",
    address: "No. 189, Grove St, Los Angeles",
    select: false,
    read: 0,
    star: 0,
    important:1,
  },
]);
const handleCommand = (command) => {
  console.log("command---", command);
  if (command == "all") {
    // 全部
    checked2.value = true;
    tableData.value.map((item) => {
      item.select = true;
      return item;
    });
  } else if (command == "no") {
    // 全部
    checked2.value = false;
    tableData.value.map((item) => {
      item.select = false;
      return item;
    });
  } else if (command == "read") {
    tableData.value.map((item) => {
      if (item.read == 1) {
        item.select = true;
      } else {
        item.select = false;
      }
      return item;
    });
  } else if (command == "unread") {
    tableData.value.map((item) => {
      if (!item.read) {
        item.select = true;
      } else {
        item.select = false;
      }
      return item;
    });
  } else if (command == "hasStar") {
    tableData.value.map((item) => {
      if (item.star) {
        item.select = true;
      } else {
        item.select = false;
      }
      return item;
    });
  } else if (command == "noStars") {
    tableData.value.map((item) => {
      if (!item.star) {
        item.select = true;
      } else {
        item.select = false;
      }
      return item;
    });
  }
};
const handlegd=(row)=>{
 console.log("row---",row)
}
const hasSelectedItem = computed(() => {
  return tableData.value.some((item) => item.select === true);
});
// watch(() => tableData.value, (newVal, oldVal) => {
// // 注意：由于是深度监听，所以当数组中的任何对象属性变化时，都会触发。
// // 但是这里要注意，由于是深度监听，oldVal和newVal在嵌套层级较深时可能相同（因为指向同一个对象），所以我们需要避免直接修改newVal或oldVal。
// console.log('tableData changed');
// }, { deep: true });
</script>
<style lang="less" scoped>
.Advanced-search{
  display:flex;
  align-items:center;
  padding:20px 0 0 20px;
  position: relative;
  ul{
    list-style: none;
    display:flex;
  align-items:center;
  .select-card {
  /* 初始状态：定位在容器顶部上方，隐藏 */
  position: absolute;
  top: -100%; /* 从顶部外部开始 */
  left: 0;
  width: 100%; /* 宽度与容器一致 */
  opacity: 0; /* 初始透明 */
  background: #fff;
  border: 1px solid #eee;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 下滑动画 */
.slide-down {
  animation: slideDown 0.5s forwards; /* 执行动画，结束后保持最终状态 */
}

/* 定义动画关键帧 */
@keyframes slideDown {
  0% {
    top: -100%; /* 起点：顶部外部 */
    opacity: 0; /* 完全透明 */
  }
  100% {
    top: 100%; /* 终点：容器底部下方（根据需要调整位置） */
    opacity: 1; /* 完全显示 */
  }
}
  li{
    padding:4px 8px;
    border:1px solid #5f6368;
    border-radius:6px;
    margin-right:10px;
    cursor: pointer;
    color:#5f6368;
    span{
      font-size:14px;
      
    }
  }
  }
}
.select-icon {
  .icon-jinggao {
    font-size: 18px;
  }
  .icon-shanchu {
    font-size: 16px;
  }
  .icon-weidu {
    font-size: 19px;
  }
}
.tip1-content {
  list-style: none;
  li {
    padding: 5px;
    cursor: pointer;
  }
  .first1 {
    font-weight: 600;
    color: #5f6160;
    border-bottom: 1px solid #efefef;
    span {
      margin-left: 10px;
    }
  }
  li:first-child:hover {
    background-color: #f1f1f1;
  }
}
.icon-content {
  position: absolute;
  top: 0;
  right: 20px;
  .iconfont {
    display: inline-block;
    margin-left: 20px;
  }
  .icon-wenjianguidang {
    font-size: 20px;
  }
  .icon-shanchu {
    font-size: 18px;
  }
  .icon-weidu,
  .icon-huishouyanhoushijian {
    font-size: 20px;
  }
}
.icon-content {
  display: none;
}
.el-table__row:hover .icon-content {
  display: block;
}
.el-table__row:hover .time {
  display: none;
}
.el-table__row:hover .sender-text {
  width: 75%;
}
.addRight /deep/ .el-checkbox__inner {
  border: 1px solid #606266 !important;
}
.addColor {
  color: #f4c84c;
}
.header-select {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left-content {
    display: flex;
    align-items: center;
  }
}
.addRight {
  margin-right: 10px !important;
  font-size: 20px;
}
.addRight1{
  margin-right:15px;
}
.mail-table {
  --border-color: #ebeef5;
  --text-primary: #333;
  --text-secondary: #666;
  --star-color: #f0c;
}

.mail-table :deep(tr) {
  transition: none;
}

.mail-table :deep(.el-table__row) {
  cursor: pointer;
}

.mail-table :deep(.el-table__row) td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border-color);
}

.mail-table :deep(.el-table__inner-wrapper) {
  border: none;
}

// .mail-item {
//   padding: 16px;
// }

// .mail-header {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   margin-bottom: 8px;
// }

.sender-info {
  display: flex;
  align-items: center;
  .icon-a-bookmarkshuqian{
    font-size:16px;
    color: #f4c84c;
  }
  .sender-text {
    display: inline-block;
    white-space: nowrap;
    width: 76%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    .title {
      font-weight: 700;
      color: #000;
    }
    .desc {
      width: auto;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      // display: inline-block;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow:ellipsis;
    }
  }
  .time {
    font-weight: 700;
    color: #000;
    // position: absolute;
    // right:20px;
    // top:0px;
  }
}

.star-icon {
  color: var(--star-color);
  margin-right: 6px;
}

.sender-name {
  width: 168px;
  font-weight: 500;
  color: var(--text-primary);
}

.time {
  font-size: 12px;
  color: var(--text-secondary);
}

.subject {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
